Add a hover menu to the "Agents" nav link.
Akinori MUSHA
3 changed files with 37 additions and 3 deletions
+ 6
- 0
app/assets/stylesheets/application.css.scss.erb
@@ -98,6 +98,12 @@ span.not-applicable:after {
|
||
| 98 | 98 |
right: 1px; |
| 99 | 99 |
} |
| 100 | 100 |
|
| 101 |
+.navbar {
|
|
| 102 |
+ .dropdown.dropdown-hover:hover .dropdown-menu {
|
|
| 103 |
+ display: block; |
|
| 104 |
+ } |
|
| 105 |
+} |
|
| 106 |
+ |
|
| 101 | 107 |
// Flash |
| 102 | 108 |
|
| 103 | 109 |
.flash {
|
+ 24
- 2
app/helpers/application_helper.rb
@@ -1,6 +1,28 @@ |
||
| 1 | 1 |
module ApplicationHelper |
| 2 |
- def nav_link(name, path, options = {})
|
|
| 3 |
- content_tag :li, link_to(name, path), class: current_page?(path) ? 'active' : '' |
|
| 2 |
+ def nav_link(name, path, options = {}, &block)
|
|
| 3 |
+ if glyphicon = options[:glyphicon] |
|
| 4 |
+ name = "<span class='glyphicon glyphicon-#{glyphicon}'></span> ".html_safe + name
|
|
| 5 |
+ end |
|
| 6 |
+ content = link_to(name, path) |
|
| 7 |
+ active = current_page?(path) |
|
| 8 |
+ if block |
|
| 9 |
+ # Passing a block signifies that the link is a header of a hover |
|
| 10 |
+ # menu which contains what's in the block. |
|
| 11 |
+ begin |
|
| 12 |
+ @nav_in_menu = true |
|
| 13 |
+ @nav_link_active = active |
|
| 14 |
+ content += capture(&block) |
|
| 15 |
+ class_name = "dropdown dropdown-hover #{@nav_link_active ? 'active' : ''}"
|
|
| 16 |
+ ensure |
|
| 17 |
+ @nav_in_menu = @nav_link_active = false |
|
| 18 |
+ end |
|
| 19 |
+ else |
|
| 20 |
+ # Mark the menu header active if it contains the current page |
|
| 21 |
+ @nav_link_active ||= active if @nav_in_menu |
|
| 22 |
+ # An "active" menu item may be an eyesore, hence `!@nav_in_menu &&`. |
|
| 23 |
+ class_name = !@nav_in_menu && active ? 'active' : '' |
|
| 24 |
+ end |
|
| 25 |
+ content_tag :li, content, class: class_name |
|
| 4 | 26 |
end |
| 5 | 27 |
|
| 6 | 28 |
def yes_no(bool) |
+ 7
- 1
app/views/layouts/_navigation.html.erb
@@ -12,7 +12,13 @@ |
||
| 12 | 12 |
|
| 13 | 13 |
<% if user_signed_in? %> |
| 14 | 14 |
<ul class='nav navbar-nav'> |
| 15 |
- <%= nav_link "Agents", agents_path %> |
|
| 15 |
+ <%= nav_link "Agents", agents_path do %> |
|
| 16 |
+ <ul class='dropdown-menu' role='menu'> |
|
| 17 |
+ <%= nav_link "New Agent", new_agent_path, glyphicon: "plus" %> |
|
| 18 |
+ <%= nav_link "Run event propagation", propagate_agents_path, glyphicon: "refresh" %> |
|
| 19 |
+ <%= nav_link "View Diagram", diagram_path, glyphicon: 'random' %> |
|
| 20 |
+ </ul> |
|
| 21 |
+ <% end %> |
|
| 16 | 22 |
<%= nav_link "Scenarios", scenarios_path %> |
| 17 | 23 |
<%= nav_link "Events", events_path %> |
| 18 | 24 |
<%= nav_link "Credentials", user_credentials_path %> |